<template>
	
		<div class="top-wrap-parent"  :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
			<!--  中信银行频道主页面-->
			<div class="top-wrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="4">
				<!-- 头部banner  album ==专辑 -->
				<Banner bannerType='album'></Banner>
				<ListCom v-for=" (v,index)  in  frequencyArray" :key="index" :list='v' v-if="frequencyArray.length>0"></ListCom>
			</div>
		</div>
</template>
<script>
	import ZxyhHeader from "../components/zxyh/zxyhHeader";
	import Banner from "../components/zxyh/bannerZXYH";
	import ListCom from './freChannel/listCom'; //频道列表组件
	export default {
		components: {
			Banner,
			ListCom,
			ZxyhHeader
		},
		data() {
			return {
				frequencyArray: [],
				page: 1, //页码
				busy: false, //打开滚动
				getPlatform: fun.getPlatform(),
				scroll:0,//页面滚动距离
			}
		},
		created() {
			this.getFreChannelData();
			fun.dotNum('freChannelHomePage');
		},
		beforeRouteLeave(to, from, next) {
			let pathList =[`/${channel}/mine`,`/${channel}/home`] //除了特色屏道二级页面 从其它页面过来滚动到最顶部
			if(pathList.includes(to.path)){
			    this.scroll = 0
			}else{				
				this.scroll = document.getElementsByClassName( "top-wrap")[0].scrollTop;		
			} 
		   next();
      },
		activated() {
			this.$store.dispatch('showNav');
			document.getElementsByClassName( "top-wrap")[0].scrollTop = this.scroll;//设置滚动
		},
		destroyed() {
			this.$store.dispatch('hideNav');
		},
    computed: {
      skinInfo() {
        return this.$store.state.skinStoreInfo
      }
    },
		methods: {
			loadMore: function() {
				this.busy = true;
				// 多次加载数据
				//this.tipText = "数据加载中..."
				setTimeout(() => {
					this.page++;
					this.getFreChannelData();
				}, 200);

			},
			getFreChannelData() {
				this.$http.get("/album/getTspdIndex?page=" + this.page + "&pageSize=4").then(res => {
						if(res.data.code == "000000") {
							if(res.data.data) {
								if(res.data.data.length) {
									this.frequencyArray = [...this.frequencyArray, ...res.data.data];
									if(res.data.data.length < 4) {
										this.busy = true; //禁用 没有更多数据了
									}
									this.busy = false;
								} else {
									this.busy = true; //禁用 没有更多数据了
								}
							}
						}
					})
					.catch(response => {

					});
			},
		},
	};
</script>
<style scoped>
	.top-wrap-parent {
		width: 100vw;
		/*height: calc(100vh - 88px);*/
		overflow: scroll;
		height: calc(100vh - 88px);
    background-size: 100% 1334px !important;
    background-repeat: repeat-y !important;
	}

	.header-conatiner+div.top-wrap-parent {
		height: calc(100vh - 176px);
		background: url(../assets/images/zxyh/homeBg.jpg) repeat;
		background-size: 100% 100%;
	}

	.header-conatiner-zxyhIos+div.top-wrap-parent {
		height: calc(100vh - 246px);
		background: url(../assets/images/zxyh/homeBg.jpg) repeat;
		background-size: 100% 100%;
	}

	.top-wrap {
		width: 100vw;
		height: 100%;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.header-box {
		margin-top: 40px;
	}
</style>
